<template>
  <div>
    <Card dis-hover style="font-size: 12px;">
      <p slot="title" style="color: #515a6e;">
        <Icon type="ios-color-filter-outline"></Icon>
        <span style="font-size: 12px;">
          套系信息 <span style="color: #777777;">（操作员工：{{orderRowData.store_employee}} 订单金额：{{orderRowData.price}}）</span>
        </span>
      </p>
      <Row class="orderDetailRow color6">
        <Col span="6">
        <Icon type="ios-color-filter-outline"></Icon>套系名称</Col>
        <Col span="2">服装</Col>
        <Col span="2">造型</Col>
        <Col span="2">修图</Col>
        <Col span="4">拍摄张数</Col>
        <Col span="4">场景数量</Col>
        <!-- <Col span="2">加修</Col> -->
        <!-- <Col span="2">入底</Col> -->
        <!-- <Col span="2">加底</Col> -->
        <!-- <Col span="2">拍照</Col> -->
      </Row>
      <Row class="orderDetailRow">
        <Col span="6">{{orderRowData.series_name}}</Col>
        <Col span="2">{{orderRowData.number_of_costumes}}</Col>
        <Col span="2">{{orderRowData.number_of_appearances}}</Col>
        <Col span="2">{{orderRowData.number_of_refined}}</Col>
        <Col span="2">{{orderRowData.number_of_shots}}</Col>
        <Col span="2">{{orderRowData.number_of_scenes}}</Col>
        <!-- <Col span="2">0</Col>
        <Col span="2">120</Col>
        <Col span="2">0</Col>
        <Col span="2">120</Col> -->
      </Row>
      <Divider />
      <Row class="orderDetailRow color6">
        <Col span="12">
          <Icon type="md-list"></Icon>产品列表
        </Col>
        <Col span="3">规格</Col>
        <Col span="3">数量</Col>
        <Col span="3">P数</Col>
        <Col span="3">张数</Col>
      </Row>
      <Row class="orderDetailRow" v-for="(item,index) in productList" :key="index">
        <Col span="12">{{item.pro_name}}</Col>
        <Col span="3">0</Col>
        <Col span="3">1</Col>
        <Col span="3">0</Col>
        <Col span="3">0</Col>
      </Row>
      <!-- <Divider />
      <Row class="orderDetailRow">
        <Col span="7">业绩人</Col>
        <Col span="5">类型</Col>
        <Col span="5">业绩金额</Col>
        <Col span="5">实收业绩</Col>
      </Row>
      <Row class="orderDetailRow">
        <Col span="7">心心</Col>
        <Col span="5">正常</Col>
        <Col span="5">7380.00</Col>
        <Col span="5"></Col>
      </Row> -->
    </Card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        orderRowData: {},
        albumList: [], // 所有相框
        frameList: [], // 所有相框
        productList: []
      }
    },
    watch: {
      '$store.state.layout.app.orderRowData'(newValue, oldValue) {
        this.orderRowData = newValue
        for (let key in this.orderRowData) {
          if (this.orderRowData[key] == null || this.orderRowData[key] == "null") {
            this.orderRowData[key] = ""
          }
        }
        console.log('orderRowData', this.orderRowData);
      },
      '$store.state.layout.app.albumList'(newValue, oldValue) {
        this.albumList = newValue;
        this.albumList.forEach(item => {
          this.productList.push({
            pro_id: item.album_id,
            pro_name: item.album_name
          })
        })
      },
      '$store.state.layout.app.frameList'(newValue, oldValue) {
        this.frameList = newValue;
        this.frameList.forEach(item => {
          this.productList.push({
            pro_id: item.frame_id,
            pro_name: item.frame_name
          })
        })
      }
    },
    created() {
      this.orderRowData = this.$store.state.layout.app.orderRowData
      for (let key in this.orderRowData) {
        if (this.orderRowData[key] == null || this.orderRowData[key] == "null") {
          this.orderRowData[key] = ""
        }
      }
      this.albumList = this.$store.state.layout.app.albumList;
      this.frameList = this.$store.state.layout.app.frameList;
      this.albumList.forEach(item => {
        this.productList.push({
          pro_id: item.album_id,
          pro_name: item.album_name
        })
      })
      this.frameList.forEach(item => {
        this.productList.push({
          pro_id: item.frame_id,
          pro_name: item.frame_name
        })
      })
    },
  }
</script>

<style scoped>

</style>
